<template>
  <a-col :span="$attrs.span">
    <a-row :align="aligin" type="flex" v-bind="$attrs" :class="$attrs.layout">
      <slot name="label">
        <label
          v-if="$attrs.label"
          :class="labelTextAlign"
          :style="{
            width: $attrs.width || 'unset'
          }"
          >{{ $attrs.label }}：</label
        >
      </slot>

      <a-col flex="1">
        <slot />
      </a-col>
    </a-row>
  </a-col>
</template>
<script>
export default {
  name: 'CpsSearchBox',
  computed: {
    layout() {
      return this.$parent.$attrs.layout || this.$attrs.layout
    },
    aligin() {
      return this.layout === 'vertical' ? '' : 'middle'
    },
    labelTextAlign() {
      return this.layout === 'vertical' ? 'text-left' : 'text-right'
    }
  }
}
</script>
<style lang="less" scoped>
label {
  // font-weight: 500;
  font-size: 12px;
}
.vertical {
  flex-direction: column;
}
</style>
